<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #div1 {
      width: 100px;
      height: 100px;
      background-color: #ff0000;
    }
  </style>
</head>

<body>
  <div id="div1"></div>
  <ul>
    <li class="aa">001</li>
    <li class="aa">002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
  </ul>
  <ul id="ul1">
    <li>003</li>
    <li>004</li>
    <li>005</li>
  </ul>
  <script>

    // dom选择器
    var oDiv1 = document.getElementById("div1");
    // 是一个伪数组（不具备数组原有的属性和方法）
    var aLi = document.getElementsByTagName("li");
    // console.log(aLi);

    var aAA = document.getElementsByClassName('aa')
    // console.log(aAA);

    // var oUl1 = document.getElementById('ul1')
    // var aLi2 = oUl1.getElementsByTagName("li");
    // aLi.push('123');
    // console.log(aLi.push);
    // console.log(oDiv1);
    // setTimeout(function () {
    //   oDiv1.style.backgroundColor = 'blue'
    // }, 5000);

    // var aLi2 = document.querySelectorAll('#ul1 li')
    var aLi2 = document.querySelectorAll('#ul1')


    console.log(aLi2[0]);

    // var oUl1 = document.querySelector('#ul1')
    // console.log(oUl1);


  </script>
</body>

</html>